<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="js/jquery-3.7.1.js"></script>
<style>
    body {
    font-family: "PingFangSC-Regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Microsoft YaHei", "sans-serif";
    text-align: left;
    color: #1A1A1A;
    background: white;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}
.header {
    height: 99px;
    border-bottom: 1px solid #DFDFDF;
}
@media (max-width: 1200px) {
    .box-center {
        width: 990px;
        margin: 0 auto;
    }
}
.box-center {
    width: 1200px;
    margin: 0 auto;
}
.header .logo {
    padding-top: 22px;
}
.header .logo a {
    float: left;
    
    height: 55px;
    background: url(/qd6/images/logo.png);
}
a {
    outline: none;
    text-decoration: none;
    color: #262626;
    transition: color .3s, background-color .3s;
}
@media (max-width: 1200px) {
    .box-center {
        width: 990px;
        margin: 0 auto;
    }
}
.box-center {
    width: 1200px;
    margin: 0 auto;
}
.cf {
    zoom: 1;
}
.login-area-wrap {
    position: relative;
    z-index: 1;
    padding: 100px 0;
    min-height: 430px;
}
.fl {
    float: left;
}
@media (max-width: 1280px) {
    .login-op-img {
        padding-left: 0;
        margin-right: 50px;
    }
}
.login-op-img {
    position: relative;
    z-index: 1;
    width: 534px;
    height: 400px;
    padding-left: 110px;
    margin-right: 78px;
}
.login-op-img img {
    display: block;
    width: 534px;
    height: 400px;
}
fieldset, img {
    border: 0 none;
}
.login-wrap.type-10.fl {
    position: relative;
    z-index: 1;
    width: 398px;
    min-height: 425px;
    background: white;
    border: 1px solid #E6E6E6;
    box-sizing: border-box;
}
.fl {
    float: left;
}
.login-wrap {
    position: relative;
    z-index: 1;
    width: 398px;
    min-height: 400px;
    background: white;
    border: 1px solid #E6E6E6;
}
.login-wrap .login-tab {
    position: relative;
    z-index: 1;
    clear: both;
    width: 322px;
    height: 45px;
    margin: 0 auto;
    border-bottom: 2px solid #E6E6E6;
}
.cf:before, .cf:after {
    display: table;
    content: '';
}
.login-wrap .login-tab ul {
    width: 101%;
    font-size: 0;
    text-align: center;
}
ol, ul, li {
    list-style: none outside none;
}
.login-wrap .login-tab ul:before, .login-wrap .login-tab ul:after {
    display: table;
    content: '';
}
.login-wrap .login-tab li.act {
    color: #1A1A1A;
    border-bottom: 2px solid #BF2C24;
}
.login-wrap .login-tab li {
    float: left;
    width: 108px;
    height: 45px;
    font-size: 16px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    color: #A6A6A6;
}
.lang {
    font-family: "PingFangSC-Regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Microsoft YaHei", "sans-serif";
    font-weight: 400;
}
.login-wrap .login-tab ul:after {
    clear: both;
}
.login-wrap .login-tab ul:before, .login-wrap .login-tab ul:after {
    display: table;
    content: '';
}
.login-switch-wrap .login-box.yw-login {
    width: 322px;
    min-height: 295px;
    padding-bottom: 18px;
}
.login-switch-wrap .login-box {
    position: relative;
    z-index: 1;
    padding: 40px 38px 0;
}
.login-mode.show {
    display: block;
}
.login-switch-wrap .login-box .error-tip {
    position: absolute;
    top: 8px;
    width: 324px;
    height: 24px;
    font: 12px / 24px "PingFangSC-Regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Microsoft YaHei", "sans-serif";
    background: #FFE4E8;
    text-align: center;
    color: #ED4259;
}
.hidden {
    display: none;
}
.login-switch-wrap .login-box dd:first-child {
    margin-top: 0;
}
.login-switch-wrap .login-box dd {
    margin-left: -10px;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 42px;
    border: 1px solid #E6E6E6;
    margin-top: 16px;
}
.login-switch-wrap .login-box dd:before, .login-switch-wrap .login-box dd:after {
    display: table;
    content: '';
}
.login-switch-wrap .login-box .input-mode dd em {
    float: left;
    width: 42px;
    height: 42px;
    font-size: 16px;
    line-height: 42px;
    text-align: center;
    color: #A6A6A6;
}
.iconfont {
    font-family: "qd_iconfont" !important;
    font-size: 24px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.1px;
    -moz-osx-font-smoothing: grayscale;
}
.login-switch-wrap .login-box .input-mode dd input {
    width: 280px;
}
.login-switch-wrap .login-box dd input {
    float: left;
    height: 28px;
    padding: 7px 0;
    font: 14px / 28px "PingFangSC-Regular", "-apple-system", Simsun;
}
input, button {
    border: none;
    outline: none;
    font-family: "PingFangSC-Regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Microsoft YaHei", "sans-serif";
}
.login-switch-wrap .login-box dd:after {
    clear: both;
}
.login-switch-wrap .login-box dd:before, .login-switch-wrap .login-box dd:after {
    display: table;
    content: '';
}
.login-common-wrap {
    padding-top: 10px;
}
.login-common-wrap .auto-login-box {
    margin-bottom: 14px;
    margin-left: -4px;
}
.login-common-wrap .go-login {
    display: block;
    border-radius: 2px;
    margin-bottom: 6px;
    height: 40px;
    line-height: 38px;
    width: 100%;
}
.red-btn {
    position: relative;
    z-index: 1;
    border-color: #BF2C24;
    background: #BF2C24;
    color: white;
    text-align: center;
    cursor: pointer;
}
.logo{
    font-size: 50px;
    width: 300px;
}
#mes{
	color:red;
}
</style>
<body>
    <div class="wrap">
        <!-- start 头部 -->
        <div class="header ">
            <div class="box-center">
                <div class="logo"><a href="index.jsp" target="_blank" rel="opener">终点小说网</a></div>
            </div>
        </div>
        <!-- end 头部 -->
    
        <!-- start 整体居中 -->
        <div class="box-center">
            <!-- start 登录区块 -->
            <div class="login-area-wrap cf">
                <!-- start 运营图 -->
                <div class="login-op-img fl">
                    <img src="image/loginBg.jpg" alt="终点登录">
                </div>
                <!-- end 运营图 -->
    
                <!-- start 登录区 -->
                <div class="login-wrap type-10 fl">
                    <!-- start 登录切换 -->
                    <div class="login-tab cf" id="j_loginTab">
                        <ul>
    
                            <li class="lang act" > 账号登录 </li>
                            
                            <li class="lang " ><a href="rigister.jsp">快速注册</a></li>
    
                        </ul>
                    </div>
                    <!-- end 登录切换 -->
    
    
                    <!-- start 登录切换容器 -->
                    <div class="login-switch-wrap">
                        <div class="login-tab-wrap" id="j_loginSwitchWrap">
                            <!-- start 阅文通行证 -->
                            <div class="login-box qd-login yw-login qidian-login ">
                                <!-- start webPC登录容器 -->
                                <div class="web-login-wrap">
                                    <!-- start 两种输入模式容器 -->
                                    <div class="login-input-mode" id="j-loginInputMode">
                                        <!-- start 输入登录模式 -->
                                        <form action="UserLoginServlet" method="get" id="myform">
                                            <div class="login-mode input-mode show" id="j-inputMode">
                                                <div class="error-tip hidden"></div>
                                                <input type="checkbox" id="myCheckbox" value="1" onchange="checkboxChanged()">我是作者
                                                <dl>
                                                    <dd><em class="iconfont">
                                                        🙍‍♂️</em><input type="text" tabindex="1" placeholder="手机/用户id"
                                                            id="userId" name="userId">
                                                    </dd>
                                                    <dd><em class="iconfont">
                                                            🔓️</em><input type="password" tabindex="2" placeholder="密码"
                                                            id="password" name="userPass">
                                                    </dd>
                                                    
                                                </dl>
                                                <span id="mes">${sessionScope.mes }</span>
                                                <!-- start 登录操作 -->
                                                <div class="login-common-wrap">
                                                    <input type="submit" value="登录" class="red-btn go-login btnLogin login-button">
                                                    
                                                </div>
                                            
                                            <!-- end 登录操作 -->
                                            </div>
                                        <!-- end 输入登录模式 -->
                                        </form>
                                    </div>
                                    
                    <script>
                        
                    </script>
    
                </div>
                <!-- end 登录区块 -->
            </div>
            <!-- end 整体居中 -->
    
    
        </div>
</body>
<script type="text/javascript">
function checkboxChanged() {
	  var checkbox = document.getElementById('myCheckbox');
	  if(checkbox.checked){
		  $("#myform").attr("action","writerLoginServlet");
	  }else{
		  
		  $("#myform").attr("action","UserLoginServlet");
	  }
	  //alert(checkbox.checked ? '选中' : '未选中');
	}
</script>
</html>